<template>
  <view class="status-view" @click="click">
    <view class="circle-view" :class="status ? 'circle-online' : 'circle-offline'" />
    <text>{{ status ? '上线中' : '已下线' }}</text>
    <image src="@/static/img/task/triangle.png" mode="scaleToFill" style="width: 12rpx; height: 7rpx; margin-left: 8rpx;"/>
  </view>
  <eui-popup ref="popup" background-color="#f8f8f8" type="center" :mask-click="false" :animation="false">
    <view class="popup-content">
      <view class="popup-title">
        <text>提示</text>
        <view class="popup-cancel" @click="closePopup">
          <eui-uicons type="closeempty" size="36" color="#888888" />
        </view>
      </view>
      <view class="popup-default-content">
        <eui-uicons type="info" size="44" color="#FF7E00" style="margin-right: 6rpx; margin-bottom: 3rpx" />
        <text class="popup-default-content__text">{{ message }}</text>
      </view>
      <view class="popup-bottom">
        <eui-button title="我要下线" type="max" maxWidth="440" @buttonClick="buttonClick" />
      </view>
    </view>
  </eui-popup>
</template>

<script setup type="ts">
import { ref, defineProps, watch, defineEmits, onMounted } from 'vue';
import dateRangUtil from "@/common/dateRangUtil";
import service from "@/common/service";
import { getRdsUrl, rdsRequest } from "@/hooks/rdsServices";
const rdsUrl = getRdsUrl();

const title = ref('');
const message = ref('');
const isButtonDisabled = ref(false); // 按钮是否禁用
const buttonDisableDuration = ref(600); // 按钮禁用时间
const popup = ref(null);

const emit = defineEmits(["clickFunc"]);

const props = defineProps({
  /**
   * 状态
   * */
  status: {
    type: Boolean,
    default: false
  },
  /**
   * 上线时间
   * */
  onlineTime: {
    type: String,
    default: ''
  },
  /**
   * 提示内容
   * */
  msg: {
    type: String,
    default: ''
  }
});

const click = async () => {
  if (isButtonDisabled.value) return;
  isButtonDisabled.value = true;
  emit('clickClose');
  if (props.status) {
    // 当前在线
    let timeDiff = dateRangUtil.calculateTimeDifference(props.onlineTime);
    let num = await getToDoTasksNum();
    message.value = `您已经上线${timeDiff}，剩余工单${num}个！`;
    popup.value.open();
  } else {
    // 当前离线
    emit('clickFunc');
  }
  setTimeout(() => {
    isButtonDisabled.value = false;
  }, buttonDisableDuration.value);
}

const closePopup = () => {
  if (isButtonDisabled.value) return;
  isButtonDisabled.value = true;
  popup.value.close();
  setTimeout(() => {
    isButtonDisabled.value = false;
  }, buttonDisableDuration.value);
}

const buttonClick = () => {
  if (isButtonDisabled.value) return;
  isButtonDisabled.value = true;
  emit('clickFunc');
  popup.value.close();
  setTimeout(() => {
    isButtonDisabled.value = false;
  }, buttonDisableDuration.value);
}

// 待办任务
const getToDoTasksNum = async () => {
  service.enjoyShowLoading('正在加载...');
  const result = await rdsRequest(rdsUrl.mainApi, 'tasktodo', 'FetchToDoTasks', {});
  service.enjoyHideLoading();
  if (result) {
    return result.length
  } else {
    return 0
  }
}

</script>

<style lang="scss" scoped>
@import '@/main.scss';

.status-view {
  width: 168rpx;
  height: 60rpx;
  background: rgb(255,255,255,0.2);
  border-radius: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level2;
  color: $uni-text-color-inverse;
  font-size: $uni-font-size-level3;
  flex-direction: row;
  box-sizing: border-box;
}
.circle-view {
  width: 16rpx;
  height: 16rpx;
  border-radius: 8rpx;
  margin: 8rpx;
}
.circle-online {
  background: $uni-color-success;
}
.circle-offline {
  background: $uni-color-invalid;
}
// 弹框
.popup-content {
  width: 630rpx;
  height: 346rpx;
  background: $uni-bg-color-inverse;
  border-radius: 20rpx;
  box-sizing: border-box;
  flex-direction: column;
}
.popup-title {
  width: 100%;
  height: 84rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  color: $uni-text-color-primary;
  font-size: $uni-font-size-level1;
  line-height: 45rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid $uni-line-color;
}
.popup-cancel {
  width: 50rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 16rpx;
}
.popup-default-content {
  width: 100%;
  height: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-family: $uni-font-family;
  color: $uni-text-color-primary;
  font-size: $uni-font-size-level1;
  line-height: 42rpx;

  &__text {
    max-width: 520rpx;
  }
}
.popup-bottom {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
